<template>
    <div class="wrapper-loading"
         v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-distance="10"
    >
        <div class="wrapper">
            <div class="item" v-for="(item,key) in newList" :key="key" v-if="item.image">
                <img v-lazy="item.image.url" alt="" @click="got_to_product_detail(item)"/>
                <div class="profile">
                    <div>{{item.title}}</div>
                    <FavBtn :designId="item.objectId"></FavBtn>
                </div>
            </div>
        </div>
        <div :style="{opacity: loading1?1:0}" class="loading-div">loading</div>
    </div>

</template>
<script>
    import withStore from "../../../../vuex/withStore";
    import {getnew} from "./service";
    import FavBtn from '../../../../components/favBtn'
    import MyAlert from '../../../../utils/myalert'
    import UniqBy from "../../../../utils/lodash/UniqBy";

    export default withStore({
        components: {
            FavBtn
        },
        data() {
            return {
                newList: this.getStore("home.newList"),
                page: this.getStore("home.newList_page"),
                loading1: false
            }
        },
        methods: {
            got_to_product_detail(item) {
                this.$router.push(`/product/${item.objectId}`)
            },
            loadMore() {
                var self = this
                var newList = this.getStore("home.newList")
                var offset = this.page.limit
                var limit = this.page.limit
                self.loading1 = true
                getnew({}, this.page).then(res => {
                    if (!res.length) return false
                    if (!newList) newList = []
                    newList = UniqBy(newList.concat(res), "objectId")
                    offset = offset + limit
                    self.page = {
                        offset, limit
                    }
                    self.newList = newList
                    self.setStore("home.newList", self.newList)
                    self.setStore("home.newList_page", self.page)
                }).catch(e => {
                    console.error(e)
                    MyAlert.fail(e.message)
                })
                setTimeout(() => {
                    self.loading1 = false
                }, 500)
            }
        }
    })
</script>
<style lang="less" scoped>
    .loading-div {
        height: px2rem(100);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wrapper {
        padding-left: px2rem(10);
        padding-right: px2rem(10);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
            margin-bottom: 10px;
            width: 49%;

            .profile {
                display: flex;
                justify-content: space-between;
                height: px2rem(50);
            }

            img {
                min-height: 171.69px;
                background: #eee;
                margin: auto;
                max-width: 100%;
                height: px2rem(400);
            }

        }
    }
</style>